<template>
  <div class="container">
    <header>
      <div class="header_t">
        <img src="images/mi.png" alt="" />
        <input class="iconfont" type="text" :placeholder="'\ue608  搜索商品名称'" />
        <span class="iconfont" style="font-size: 0.09rem">&#xe606;</span>
      </div>
      <div class="header_f">
        <ul>
          <li>推荐</li>
          <li>手机</li>
          <li>智能</li>
          <li>电视</li>
          <li>家电</li>
          <li>笔记本</li>
          <li class="iconfont">&#xe604;</li>
        </ul>
      </div>
    </header>
    <main>
      <MySwiper :imgarr="imgarr"/>
      <!-- <div class="banner">
        <img src="images/banner.png" alt="" />
      </div> -->
      <ul class="object">
        <li><img src="images/1.png" alt="" /></li>
        <li><img src="images/2.png" alt="" /></li>
        <li><img src="images/3.png" alt="" /></li>
        <li><img src="images/4.png" alt="" /></li>
        <li><img src="images/5.png" alt="" /></li>
        <li><img src="images/6.png" alt="" /></li>
        <li><img src="images/7.png" alt="" /></li>
        <li><img src="images/8.png" alt="" /></li>
        <li><img src="images/9.png" alt="" /></li>
        <li><img src="images/10.png" alt="" /></li>
      </ul>
      <div class="project">
        <div class="project_l">
          <img src="images/11.png" alt="" />
        </div>
        <div class="project_r">
          <div class="project_r_t">
            <img src="images/小米手环.png" alt="" />
          </div>
          <div class="project_r_b">
            <img src="images/12.png" alt="" />
          </div>
        </div>
      </div>
      <div class="banner2">
        <img src="images/xiaomi 11.png" alt="" />
      </div>
      <ul class="product">
        <li>
          <img src="images/13.png" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <span>￥4999</span>
          <button class="buy">立即购买</button>
        </li>
        <li>
          <img src="images/14.png" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <span>￥4999</span>
          <button class="buy">立即购买</button>
        </li>
        <li>
          <img src="images/14.png" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <span>￥4999</span>
          <button class="buy">立即购买</button>
        </li>
        <li>
          <img src="images/13.png" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <span>￥4999</span>
          <button class="buy">立即购买</button>
        </li>
        <li>
          <img src="images/13.png" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <span>￥4999</span>
          <button class="buy">立即购买</button>
        </li>
        <li>
          <img src="images/14.png" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <span>￥4999</span>
          <button class="buy">立即购买</button>
        </li>
        <li>
          <img src="images/14.png" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <span>￥4999</span>
          <button class="buy">立即购买</button>
        </li>
        <li>
          <img src="images/13.png" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <span>￥4999</span>
          <button class="buy">立即购买</button>
        </li>
      </ul>
      <div class="more">
        更多小米手机产品<span class="iconfont">&#xe603;</span>
      </div>
      <div class="banner3">
        <img src="images/小米电视.webp" alt="" />
      </div>
      <div class="more">
        更多小米电视产品<span class="iconfont">&#xe603;</span>
      </div>
      <div class="banner3">
        <img src="images/笔记本webp.webp" alt="" />
      </div>

      <ul class="product">
        <li>
          <img src="images/1.jpg" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <br />
          <button class="buy">立即购买</button>
        </li>
        <li>
          <img src="images/1.jpg" alt="" />
          <h2>小米11 Pro</h2>
          <h3>折叠大屏|自研芯片</h3>
          <h4>￥4499起</h4>
          <br />
          <button class="buy">立即购买</button>
        </li>
      </ul>
      <div class="more">
        更多小米笔记本产品<span class="iconfont">&#xe603;</span>
      </div>
      <div class="banner3">
        <img src="images/饮水机.webp" alt="" />
      </div>
      <div class="more">
        更多米家家电产品<span class="iconfont">&#xe603;</span>
      </div>
      <div class="banner3">
        <img src="images/智能.webp" alt="" />
      </div>
      <div class="more">
        更多米家智能产品<span class="iconfont">&#xe603;</span>
      </div>
      <ul class="logo">
        <li>
          <img src="images/15.png" alt="" />
        </li>
        <li>
          <img src="images/16.png" alt="" />
        </li>
        <li>
          <img src="images/16.png" alt="" />
        </li>
        <li>
          <img src="images/15.png" alt="" />
        </li>
        <li>
          <img src="images/15.png" alt="" />
        </li>
        <li>
          <img src="images/16.png" alt="" />
        </li>
      </ul>
      <div class="banner3">
        <img src="images/footer.png" alt="" />
      </div>
    </main>
    <button class="gu">
      <img src="images/button.png" alt="" />
    </button>
    <div class="iconfont goTop">&#xe725;</div>
    <footer>
      <Footerbar />
    </footer>
  </div>
</template>

<script>
import Footerbar from "../../components/Footerbar/Footerbar.vue";
import MySwiper from '../../components/swiper/swiper.vue'

export default {
  name: "Shouye",
  data() {
    return {
      imgarr:[
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7235d5500b3a85e1172537183734b7ee.jpg?thumb=1&w=720&h=360',
        'images/banner.png',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4ad5e7823be3723d527e093a604d66d.jpg?thumb=1&w=720&h=360'
        
      ]
    }
  },
  components: {
    Footerbar,
    MySwiper

  },
  created() {
    this.$store.dispatch("getLists")
  },
};
</script>

<style scoped>
header {
  height: 0.52rem;
  background-color: #f2f2f2;
}
footer {
  height: 0.26rem;
}
main {
  flex: 1;
  background-color: #f5f5f5;
  overflow-y: auto;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* header */
.header_t {
  height: 0.4rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.header_t img {
  width: 0.26rem;
  height: 0.17rem;
}
.header_t input {
  width: 2.69rem;
  height: 0.33rem;
  border: 0;
  outline: 0;
  padding: 0 0.2rem;
  font-size: 0.16rem;
}
.header_t input::-webkit-input-placeholder {
  font-size: 0.15rem;
  /* color: red; */
}
.header_f {
  height: 0.37rem;
}
.header_f ul {
  display: flex;
  height: 0.37rem;
  justify-content: space-around;
}
.header_f ul li {
  height: 0.37rem;
  font-size: 0.13rem;
  color: #919191;
  flex: 1;
  text-align: center;
  line-height: 0.37rem;
}
.header_f ul li:hover {
  color: #ed5b00;
  border-bottom: 0.02rem solid #ed5b00;
}

/* main */
main .banner {
  height: 1.88rem;
}
main .banner img {
  width: 100%;
}
main .object {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 1.6rem;
  background-color: #fff;
}
main .object li {
  width: 20%;
}
main .object li img {
  width: 100%;
}

main .project {
  margin-top: 0.1rem;
  height: 2.65rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
main .project .project_l {
  width: 1.86rem;
}
main .project .project_r {
  width: 1.86rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
main .project .project_r .project_r_t {
  height: 1.32rem;
}
main .project .project_r .project_r_b {
  height: 1.32rem;
}

main .banner2 {
  height: 2.3rem;
}

main .product {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background-color: #fff;
}
main .product li {
  width: 1.78rem;
  height: 2.53rem;
  text-align: center;
}

main .product li img {
  width: 1.79rem;
  height: 1.46rem;
}

main .product li h2 {
  font-size: 0.145rem;
}
main .product li h3 {
  font-size: 0.12rem;
  margin-top: 0.03rem;
}
main .product li h4 {
  display: inline-block;
  font-size: 0.145rem;
  color: #ea625b;
}
main .product li span {
  font-size: 0.12rem;
}

main .product li .buy {
  width: 1.05rem;
  height: 0.3rem;
  border-radius: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  color: #fff;
  background-color: #ea625b;
  border: 0;
}
main .more {
  width: 100%;
  height: 0.52rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.52rem;
  font-size: 0.145rem;
  margin-top: 0.05rem;
}

main .banner3 {
  height: 2.29rem;
  margin-top: 0.08rem;
}

main .logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main .logo li {
  width: calc((100% - 0.05rem) / 2);
  height: 2.5rem;
  margin-top: 0.05rem;
}

/* button */
.gu {
  width: 1.3rem;
  height: 0.4rem;
  position: absolute;
  bottom: 0.52rem;
  left: 1.18rem;
  border-radius: 0.4rem;
  /* border: 0; */
}
.gu img {
  height: 100%;
  width: 100%;
}

.goTop {
  width: 0.3645rem;
  height: 0.3645rem;
  border-radius: 50%;
  background-color: #fff;
  color: gray;
  text-align: center;
  line-height: 0.3645rem;
  position: absolute;
  bottom: 0.52rem;
  right: 0.3rem;
  /* display: none; */
}
@media screen and (max-height: 5.69rem) {
  .goTop {
    display: none;
  }
}
</style>